<template>
	<view class="paymentss_main">
		<div class="paymentss_top">
			<div>支付金额</div>
			<div style="margin-top: 10px;">￥{{jesone}}元</div>
		</div>
		<div class="paymentss_con">
			<div class="paymentss_con_con">支付方式</div>
			<div class="paymentss_mode">
				<div class="paymentss_img">
					<img src="../.././static/img/zhifu.png" alt="" />
					微信支付
				</div>
				<div class="paymentss_checked" @click="()=>{state=!state}">
					<img src="../.././static/img/dui.png" alt="" v-if='state' />
				</div>
			</div>
		</div>
		<div class="paymentss_bottom" @click="qued">确定</div>
	</view>
</template>

<script>
	import {
		split
	} from 'lodash'
	export default {
		data() {
			return {
				state: true,
				jesone: '',
				ids: '',
				a: '',
				b: '',
				c: '',
			}
		},
		onLoad(e) {
			this.jesone = e.je
			this.ids = e.id
			this.a = e.jinesa
			this.b = e.fuwf
			
		},
		methods: {
			qued() {
				if (this.state == true) {
					this.$ajax('put', 'recovery/appointment_order', {
						amount: this.a,
						serviceFee: this.b,
						total: this.jesone,
						id: this.ids
					}).then((res) => {
						if (res.code == 200) {
							this.$ajax('get', 'recovery/appointment_order/payOrder/' + this.ids).then((res) => {
								if (res.code == 200) {
									this.$api.msg('支付成功~')
									setTimeout(() => {
										uni.navigateTo({
											url: '../index/Recallslip'
										})
									}, 600)
								}
							})
						}
					})
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #f6f6f6;
	}

	.paymentss_main {
		padding: 0 20px;
	}

	.paymentss_top {
		margin-top: 30px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.paymentss_con_con {
		font-size: 12px;
		padding-left: 15px;
	}

	.paymentss_mode {
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		padding: 15px 20px;
		border-radius: 5px;
	}

	.paymentss_img {
		display: flex;
		align-items: center;

		img {
			width: 20px;
			padding-right: 7px;
		}
	}

	.paymentss_checked {
		border: 1px solid #ccc;
		width: 20px;
		border-radius: 50px;
		display: flex;
		align-items: center;
		overflow: hidden;
		justify-content: center;


		img {
			width: 19px;
		}
	}

	.paymentss_bottom {
		margin-top: 50px;
		border-radius: 30px;
		background-color: #4580ff;
		padding: 12px;
		text-align: center;
		border: 1px solid #ccc;
		color: #fff;
	}
</style>